<script setup>
import { onMounted, ref, reactive } from "vue";
import * as echarts from "echarts";

const mychart1 = ref(null);
const mychart2 = ref(null);
const data1 = reactive([
  { name: "已用工天", value: 574 },
  { name: "剩余总共天", value: 1264 },
]);
const data2 = reactive([
  { name: "支出", value: 171.6 },
  { name: "结余", value: 111.5 },
]);
const option = {
  color: ["#4b5bee", "#d9d9d9"],
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b}: {c} ({d}%)",
  },
  legend: {
    bottom: "2%",
    left: "center",
    orient: "vertical",
    // 自定义图例项的样式，使用点状的标记
    data: data1.map((item) => ({
      name: item.name,
      icon: "circle", // 使用圆形的标记
    })),
    // 自定义图例项的样式和显示内容
    formatter: function (name) {
      for (let i = 0; i < data1.length; i++) {
        if (data1[i].name === name) {
          return `${data1[i].name}：${data1[i].value}天`;
        }
      }
    },
  },
  title: {
    show: true,
    text: ["{a|共计}", `{b|${data1[0].value + data1[1].value}}`, "{a|天}"].join(
      ""
    ),
    textStyle: {
      rich: {
        a: {
          color: "#999", // 主标题部分文字灰色
          fontSize: 14,
          fontWeight: "normal",
        },
        b: {
          color: "#43A2E7", // 蓝色高亮部分文字颜色
          fontSize: 22,
          fontWeight: "bold",
        },
      },
    },
    top: "center",
    left: "50%",
    textAlign: "center",
    padding: [15, 0],
  },
  series: [
    {
      name: "用工统计",
      type: "pie",
      radius: ["40%", "55%"],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: "outside",
        formatter: "{b}: {d}%",
        fontSize: 14,
        color: "#fff",
      },
      padAngle: 5,
      emphasis: {
        label: {
          show: false,
          fontSize: 20,
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: data1,
    },
  ],
};
const option2 = {
  color: ["#fa8a14", "#4b5bee"],
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b}: {c}万元 ({d}%)",
  },
  legend: {
    bottom: "2%",
    left: "center",
    orient: "vertical",
    // 自定义图例项的样式，使用点状的标记
    data: data2.map((item) => ({
      name: item.name,
      icon: "circle", // 使用圆形的标记
    })),
    // 自定义图例项的样式和显示内容
    formatter: function (name) {
      let total = 0;
      for (let i = 0; i < data2.length; i++) {
        total += data2[i].value;
        if (data2[i].name === name) {
          return `${data2[i].name}：${data2[i].value}万元 占比${(
            (data2[i].value / total) *
            100
          ).toFixed(2)}%`;
        }
      }
    },
  },
  title: {
    show: true,
    text: [`{a|¥${data2[0].value + data2[1].value}万元}`].join(""),
    textStyle: {
      rich: {
        a: {
          color: "#000", // 主标题部分文字灰色
          fontSize: 18,
          fontWeight: "normal",
        },
      },
    },
    subtext: "项目合同额",
    top: "center",
    left: "50%",
    textAlign: "center",
    padding: [15, 0],
    subtextStyle: {
      align: "center",
    },
  },
  series: [
    {
      name: "项目合同额",
      type: "pie",
      radius: ["40%", "55%"],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: "outside",
        formatter: "{b}: {d}%",
        fontSize: 14,
        color: "#fff",
      },
      padAngle: 5,
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: data2,
    },
  ],
};

// 在onMounted钩子中初始化echarts实例并绑定option
onMounted(() => {
  if (mychart1.value) {
    // 浏览器窗口大小变化时，echarts图表自适应
    window.addEventListener("resize", () => {
      mychart1.value.chart.resize();
    });
  }

  if (mychart2.value) {
    // 浏览器窗口大小变化时，echarts图表自适应
    window.addEventListener("resize", () => {
      mychart2.value.chart.resize();
    });
  }
});
</script>

<template>
  <div class="left_BOX">
    <v-chart
      ref="mychart1"
      class="chart"
      :option="option"
      :auto-resize="true"
    ></v-chart>
    <v-chart
      ref="mychart2"
      class="chart"
      :option="option2"
      :auto-resize="true"
    ></v-chart>
  </div>
</template>

<style scoped lang="scss">
.left_BOX {
  // padding: 0.5rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40vh;
  .chart {
    width: 40%; /* 设置echarts图表的宽度 */
    height: 40vh; /* 设置echarts图表的高度 */
  }
}
</style>
